<template>
  <div class="referencePanel">
    <div class="head">
      <span>知识库</span>
    </div>
    <div class="avtiveResource" v-if="rightExt.rightType == '1'">
      <el-checkbox v-model="useResource" @change="sourceCheck">启用平台资源</el-checkbox>
      <div>{{ rightExt.resourceTitle }}</div>
    </div>

    <div class="new-curriculum" v-if="rightExt.rightType == '4'">
      <img src="@/assets/ai/jiaocan_sel.svg" alt="" class="img" />
      <div class="text">AI已学习新课标内容，可为您提供详细的课标解读</div>
    </div>

    <div class="addLoclResource">
      <div class="head">添加本地资源</div>
      <div class="subHead">可上传更多内容来定义内容创作重点、格式等</div>
      <el-upload
        :headers="{ Authorization: `Bearer ${getStorage('token')}` }"
        class="upload-demo"
        drag
        multiple
        :show-file-list="false"
        :action="uploadUrlBotId(botId)"
        :before-upload="audioBeforeUpload"
        :on-success="res => audioUploadSuccess(res)"
        :on-preview="handlePictureCardPreview"
      >
        <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
        <div class="addBox">
          <img :src="uploadAdd" alt="" srcset="" />
        </div>
        <div class="el-upload__text">点击文件上传，支持TXT、Markdown、PDF、HTML、DOCX 格式</div>
      </el-upload>
      <div class="fileList">
        <div v-for="(item, key) in state.files" :key="key" class="items">
          <img class="file" :src="uploadThumb" alt="" srcset="" />
          <span>{{ item.name }}</span>
          <!-- <span>{{ item.url }}</span> -->
          <div class="closew" @click="remove(item)">
            <img :src="miniclose" alt="" />
          </div>
        </div>
      </div>
      <div v-if="state.loadingInstance" class="uploadStatus">
        <img class="file" :src="uploadLoading" alt="" srcset="" />
        <span>上传中…</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import _ from 'lodash';
import { ref, toRefs, reactive, watch } from 'vue';
import { getStorage } from '@/utils';
import { ElMessage } from 'element-plus';
// import { UploadFilled } from "@element-plus/icons-vue";
import uploadAdd from '@/assets/ai/uploadAdd.svg';
import uploadThumb from '@/assets/ai/uploadThumb.svg';
import uploadLoading from '@/assets/ai/uploadLoading.gif';
import miniclose from '@/assets/ai/miniclose.svg';
import { uploadFileGet, uploadUrlBotId } from '@/services/file';

const useResource = ref(true);

const emit = defineEmits(['getValues']);
const props = defineProps({
  rightExt: {
    type: Object,
    default: () => ({}),
  },
  botId: String,
  rightFileList: {
    type: Array,
    default: () => [],
  },
});

const state = reactive({
  linkUrl: '',
  // 上传ing
  loadingInstance: false,
  // 存储上传的files
  files: [],
  // 文件类型
  wolds: 'txt,doc,docx,pdf,ppt,pptx,xlsx,xls',
  imgs: 'jpg,jpeg,png,gif,webp,svg',
  audios: 'mp3,m4a,wav,webm,amr',
  videos: 'mp4,mov,mpeg,mpga',
  fileName: '',
});

watch(
  () => props.rightFileList,
  val => {
    state.files = val;
  },
  { immediate: true },
);

const sourceCheck = () => {
  emit('getValues', { useResource: useResource.value, fileList: state.files });
};

// 文件上传
const audioBeforeUpload = rawFile => {
  console.log('rawFile', rawFile);
  const { name } = rawFile;
  state.fileName = name;

  // 验证文件类型
  const fileExtension = name.substring(name.lastIndexOf('.')).toLowerCase();
  const allowedExtensions = ['.txt', '.md', '.markdown', '.pdf', '.html', '.htm', '.doc', '.docx'];

  if (!allowedExtensions.includes(fileExtension)) {
    ElMessage.error('只支持上传TXT、Markdown、PDF、HTML、DOC、DOCX格式的文件');
    return Promise.reject();
  }

  if (state.files.length >= 5) {
    ElMessage.warning(`最多只能上传5个文件`);
    return Promise.reject();
  }

  state.loadingInstance = true;
};

const handleExceed = (files, uploadFiles) => {
  if (state.files.length >= 5) {
    ElMessage.warning(`最多只能上传5个文件，当前已上传${state.files.length}个`);
  }
};

// 文件上传成功
const audioUploadSuccess = res => {
  const { errCode, data } = res;
  if (errCode === 0) {
    state.loadingInstance = false;
    // 根据文件后缀判断类型
    // const houzhui = _.last(data.filePath.split('.'));
    // let type = '';
    // if (_.includes(state.wolds, houzhui.toLowerCase())) {
    //   type = 'document';
    // }
    // if (_.includes(state.imgs, houzhui.toLowerCase())) {
    //   type = 'image';
    // }
    // state.files.push({ url: uploadFileGet(data.filePath), type, transfer_method: 'remote_url' });
    state.files.push({ filePath: uploadFileGet(data.filePath), name: state.fileName, aiTag: true });
    emit('getValues', { useResource: useResource.value, fileList: state.files });
  }
};
const handlePictureCardPreview = uploadFile => {
  state.linkUrl = uploadFile.filePath;
};
const remove = item => {
  state.files = _.filter(state.files, v => v.filePath !== item.filePath);
  emit('getValues', { useResource: useResource.value, fileList: state.files });
};
</script>

<style lang="scss">
.upload-demo {
  .el-upload-dragger {
    border: 1px solid #eeeeee;
  }
}

.avtiveResource {
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #ff8500 !important;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #ff8500;
    border-color: #ff8500;
  }

  .el-checkbox__inner:hover {
    border-color: #ff8500;
  }
}
</style>
<style scoped lang="scss">
.referencePanel {
  padding: 16px;
  height: calc(100% - 40px);
  background: rgba(255, 133, 0, 0.05);
  border-radius: 8px;
  width: 316px;
  background: rgba(255, 133, 0, 0.05);
  border-radius: 8px;
  box-sizing: border-box;
  margin: 20px 0;

  .head {
    span {
      width: 54px;
      height: 25px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #1a1a1a;
      line-height: 25px;

      &::before {
        position: absolute;
        content: '';
        background-image: url('@/assets/ai/tabSelect.svg');
        width: 54px;
        height: 25px;
        background-size: 39.75px 11.59px;
        background-position: bottom center;
        background-repeat: no-repeat;
        z-index: -1;
      }
    }
  }

  .avtiveResource {
    width: 284px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    padding: 6px 16px 16px 16px;
    box-sizing: border-box;
    margin-top: 16px;

    div {
      width: 252px;
      height: 40px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #6a6a6a;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
  }

  .new-curriculum {
    width: 284px;
    height: 56px;
    background: linear-gradient(90deg, #652bf9 0%, #433cfe 100%);
    border-radius: 8px;
    margin-top: 18px;
    display: flex;
    align-items: center;

    .img {
      width: 32px;
      height: 32px;
      margin: 0 12px;
    }

    .text {
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
      margin-right: 16px;
    }
  }

  .addLoclResource {
    margin-top: 16px;

    .head {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #1a1a1a;
      line-height: 20px;
      margin-bottom: 4px;
    }

    .subHead {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #6a6a6a;
      margin-bottom: 8px;
      line-height: 20px;
    }

    .upload-demo {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      line-height: 18px;
      text-align: right;
      font-style: normal;

      .addBox {
        display: flex;
        justify-content: center;
        padding-bottom: 24px;

        img {
          width: 32px;
          height: 32px;
        }
      }
    }
  }

  .uploadStatus {
    width: 284px;
    height: 40px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 8px;

    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }

    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
  }

  .fileList {
    display: flex;
    flex-direction: column;

    .items {
      width: 284px;
      height: 40px;
      background: #ffffff;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      border: 1px solid #eeeeee;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 10px;
      margin-top: 8px;
      box-sizing: border-box;

      .file {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }

      &:hover {
        .closew {
          display: flex;
        }
      }

      span {
        // flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 200px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #6a6a6a;
        line-height: 20px;
      }

      .closew {
        width: 12px;
        height: 12px;
        background: rgba(0, 0, 0, 0.45);
        border-radius: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;

        img {
          width: 6px;
          height: 6px;
        }
      }
    }
  }
}
</style>
